<template>
  <div>
    <Header title="社会组织评估申报平台" :back="true" />
    <div class="content">
      <div class="list_change">
        <a-radio-group
          :default-value="0"
          button-style="solid"
          @change="listChange"
        >
          <a-radio-button :value="0"> 未读 </a-radio-button>
          <a-radio-button :value="1"> 已读 </a-radio-button>
        </a-radio-group>
      </div>
      <a-spin :spinning="loading">
        <template v-if="data.length">
          <a-list size="large" bordered :data-source="data">
            <a-list-item
              slot="renderItem"
              slot-scope="item"
              @click="showDetail(item)"
            >
              <a-list-item-meta>
                <a slot="title">
                  <div class="top">
                    <div class="top_title">{{ item.title || "--" }}</div>
                    <div class="no_read" v-if="isRead === 0"></div>
                  </div>
                </a>
                <span slot="description">
                  发布时间：{{ item.createTime || "--" }}
                </span>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
          <div class="page">
            <a-pagination
              show-size-changer
              show-quick-jumper
              :current="pagination.current"
              :total="pagination.total"
              :showTotal="pagination.showTotal"
              :pageSize="pagination.pageSize"
              @showSizeChange="pagination.onShowSizeChange"
              @change="pagination.onChange"
            />
          </div>
        </template>
        <a-empty v-else />
      </a-spin>
    </div>
    <a-modal
      v-model="visible"
      title="消息详情"
      :body-style="{ padding: '12px 40px 40px 20px' }"
      :width="1000"
      centered
      :footer="null"
    >
      <div class="box">
        <div class="title">{{ info.title }}</div>
        <a-divider />
        <div class="text">{{ info.content }}</div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import Header from "@/components/header.vue";
import { pageList, read } from "@/api/message";
export default {
  components: { Header },
  data() {
    return {
      loading: true,
      data: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      info: {},
      visible: false,
      isRead: 0, // 0未读 1已读
    };
  },
  methods: {
    listChange(e) {
      this.pageNum = 1;
      this.isRead = e.target.value;
      this.getPageList(this.isRead);
    },
    getPageList(isRead) {
      this.loading = true;
      pageList({ size: this.pageSize, current: this.pageNum, isRead }).then(
        (res) => {
          this.pagination = this.getPagination(res.data);
          this.data = res.data.records;
          setTimeout(() => {
            this.loading = false;
          }, 500);
        }
      );
    },
    getPagination(data) {
      const pages = data ? data.pages : 0;
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: (total) => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: (pageNum) => {
          this.pageNum = pageNum;
          this.getPageList(this.isRead);
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current;
          this.pageSize = size;
          this.getPageList(this.isRead);
        },
      };
    },
    showDetail(e) {
      // console.log(e);
      this.info = e;
      this.visible = true;
      read({id: e.id}).then(() => {
        this.pageNum = 1;
        this.getPageList(this.isRead);
      });
    },
  },
  created() {
    this.pagination = this.getPagination();
  },
  mounted() {
    this.getPageList(this.isRead);
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-page-header {
  border-bottom: 1px solid rgb(235, 237, 240);
}
.content {
  padding: 3rem;
  .list_change {
    margin-bottom: 20px;
  }
  .top {
    display: flex;
    align-items: center;
    .top_title {
      margin-right: 10px;
    }
    .no_read {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #dd2f21;
    }
  }

  .page {
    margin-top: 2rem;
    text-align: right;
  }
}
.box {
  .img {
    overflow: hidden;
    img {
      width: 100%;
      float: left;
    }
  }
  .title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-top: 24px;
  }
  .text {
    font-size: 14px;
    color: #444;
  }
  .file-list {
    .file-list-title {
      font-size: 18px;
      color: #333;
      margin-bottom: 12px;
    }
    .file {
      font-size: 14px;
      a {
        color: #1890ff;
      }
    }
  }
}
</style>